<template>
  <div class="container">
    <Navbar :title="'入院登记'" />
    <div class="step">
      <!-- 生成步骤图 -->
      <div class="step-item" @click="changeFlag(1)" :style="flag == true ? 'color: rgb(8, 75, 255);' : ''">
        <img src="@/assets/tabs/first.png" alt="" />
        <h4>基本信息</h4>
      </div>
      <div class="step-item" @click="changeFlag(2)" :style="flag == false ? 'color: rgb(8, 75, 255);' : ''">
        <img src="@/assets/tabs/second.png" alt="" />
        <h4>入院审核</h4>
      </div>
    </div>
    <div class="content" v-show="flag == true">
      <h4 style="text-align: start; margin-left: 30px; line-height: 50px">
        请完善一下基本信息
      </h4>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="username"
              label="患者名称"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <hr />
            <van-field
              v-model="age"
              name="age"
              label="年龄"
              placeholder="请输入年龄"
              :rules="[{ required: true, message: '请填写年龄' }]"
            />
            <van-field name="radio" label="性别">
              <template #input>
                <van-radio-group v-model="checked" direction="horizontal">
                  <van-radio :name="1">男</van-radio>
                  <van-radio :name="0">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="result"
              is-link
              readonly
              name="datePicker"
              label="出生日期"
              placeholder="点击选择时间"
              @click="showPicker = true"
            />
            <van-popup v-model:show="showPicker" position="bottom">
              <van-date-picker
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
            </van-popup>
            <van-field
              label="身份证号"
              v-model="id"
              name="id"
              placeholder="请输入身份证号"
              :rules="[{ validator, message: '身份证号不正确' }]"
            />
            <van-field
              label="就诊卡号"
              v-model="card"
              name="card"
              placeholder="请输入就诊卡号"
              :rules="[{ validator: validator1, message: '卡号不正确' }]"
            />
            <van-field
              label="本人电话"
              v-model="phone"
              name="validator2"
              placeholder="请输入本人联系电话"
              :rules="[
                { validator: validator2, message: '请输入正确的电话号码' },
              ]"
            />
            <van-field
              v-model="nationality1"
              name="nationality1"
              label="国籍"
              placeholder="请输入国籍"
              :rules="[{ required: true, message: '请填写国籍' }]"
            />
            <van-field
              v-model="nationality2"
              name="nationality2"
              label="民族"
              placeholder="请输入民族"
              :rules="[{ required: true, message: '请填写民族' }]"
            />
            <van-field
              v-model="curAddress"
              name="curAddress"
              label="现住址"
              placeholder="请输入现住址"
              :rules="[{ required: true, message: '请填写现住址' }]"
            />
            <van-field
              v-model="curAddressDetails"
              name="curAddressDetails"
              label="现住址详情"
              placeholder="请输入现住址详情"
              :rules="[{ required: true, message: '请输入现住址详情' }]"
            />
            <van-field
              v-model="contactName"
              name="contactName"
              label="联系人姓名"
              placeholder="请输入联系人姓名"
              :rules="[{ required: true, message: '请输入联系人姓名' }]"
            />
            <van-field
              v-model="contactPhone"
              name="contactPhone"
              label="联系人电话"
              placeholder="请输入联系人电话"
              :rules="[
                { validator: validator2, message: '请输入正确的电话号码' },
              ]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button block type="primary" native-type="submit">
              提交申请
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div v-show="flag!=true" class="content">
      <div class="content-title">
        <h4>入院审核通过</h4>
        <p>您的入院审核通过,当时暂无床位,有床位时医院人员会电话通知您</p>
      </div>
      
      <div class="content-details">
        <div class="details-header">
          <h3>住院人信息</h3>
          <button>已登记</button>
        </div>
        <div class="details-content">
          <p>{{username}}<span style="margin-left: 10px;">女</span><span style="margin-left: 10px;">25岁</span></p>
          <p>住院号：221</p>
          <p>入院病区：内一科病区</p>
          <p>住院医生：刘医生</p>
          <p>床位号：暂未签床</p>
          <p>审核时间：{{result}}</p>
          <p>入院诊断：肺部阴影</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import Navbar from "./component/Navbar.vue";
import { ref } from "vue";
const username = ref("王小柯");
const age = ref("23");
const checked = ref(0);
const result = ref("2014/01/01");
const id = ref("410922200206281638");
const card = ref("111111111111111111");
const phone = ref("16650566935");
const showPicker = ref(false);
const nationality1 = ref("中国");
const nationality2 = ref("汉族");
const curAddress = ref("北京");
const curAddressDetails = ref("海淀区");
const contactName = ref("张三");
const contactPhone = ref("16650566935");
const flag = ref(true);
const flag1= ref(false);

const active = ref(0);

const obj=ref({

})
const onConfirm = ({ selectedValues }: any) => {
  result.value = selectedValues.join("/");
  showPicker.value = false;
};

interface Date {
  getMonth(): number;
  getDate(): number;
}
const onSubmit = async(values: any) => {
  console.log("submit", values);
  localStorage.setItem("obj", JSON.stringify(values));
  let {data:{data}}=await axios.post('http://localhost:3000/zhc/addAdmiss', values)
  flag.value=!flag.value
  if (flag.value===false){
    let obj=JSON.parse(localStorage.getItem('obj')|| '{}')
    let {data:{data}}=await axios.post('http://localhost:3000/zhc/getStatus',{username:obj.username})
    obj=data
    console.log(obj,2222222);
  }
};

const changeFlag = (type: number) => {
  if (type === 1) {
    flag.value = true;
    flag1.value = false;
  } else {
    flag.value = false;
    flag1.value = true;
  }
};
// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val: any) =>
  /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
    val
  );
const validator1 = (val: any) => /\d{16}|\d{19}/.test(val);
const validator2 = (val: any) =>
  /^1(3[0-9]|4[5-9]|5[0-35-9]|66|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: hidden;
  .step {
    margin-top: 45px;
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    background-color: rgb(242, 242, 239);
    align-items: center;
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .content {
    background-color: white;
    margin-top: 135px;
    .form {
      width: 100%;
    }
    .content-title{
      width: 100%;
      height: 120px;
      background-color: rgb(201, 255, 255);
      color: rgb(0, 187, 224);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 0px 20px;
      box-sizing: border-box;
      line-height: 30px;
    }
    .content-details{
      padding: 0px 15px;
      .details-header{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button{
          border: none;
          background-color: rgb(227, 224, 224);
        }
      }
      .details-content{
        line-height: 30px;
      }
    }
    .active{
      color: rgb(201, 255, 255);
    }
  }
}
</style>